<template>
  <div class="home">
    <el-row :gutter="20" class="card-row">
      <el-col :span="6">
        <el-card class="card">
          <div class="card-content">
            <el-statistic group-separator="," :value="counts.totalApartments" title="已有套房">
              <template slot="suffix">
                <span class="unit">套</span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="card-content">
            <el-statistic group-separator="," :value="counts.rentedTenants" title="已租租客">
              <template slot="suffix">
                <span class="unit">人</span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="card-content">
            <el-statistic group-separator="," :value="counts.pendingTenants" title="待办审核">
              <template slot="suffix">
                <span class="unit">件</span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="card-content">
            <el-statistic group-separator="," :value="counts.otherTenants" title="累计通过">
              <template slot="suffix">
                <span class="unit">件</span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="additional-info">
      <el-col :span="12">
        <el-card class="announcement">
          <h3>系统公告</h3>
          <p>系统仍在开发中...</p>
          <p>部分功能可能存在缺陷，敬请理解！</p>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="user-card">
          <h3>登录信息</h3>
          <p>管理员: {{ $store.getters.getLoginAdmin.name }}</p>
          <p>权限: {{ $store.getters.getLoginAdmin.roleName }}</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="charts">
      <el-col :span="24">
        <el-card class="chart">
          <h3>租客统计</h3>
          <div ref="chart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
  
<script>
import * as echarts from "echarts";

export default {
  name: "Home",
  data() {
    return {
      tenantCountByMonth: [],
      counts: {}
    };
  },
  mounted() {
    this.fetchTenantCountByMonth();
    this.getCount();
  },
  methods: {
    fetchTenantCountByMonth() {
      this.$axios
        .get("tenant/countByMonth")
        .then(response => {
          this.tenantCountByMonth = response.data.data;
          this.initChart();
        })
        .catch(error => {
          this.$message.error(error.message);
        });
    },
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          name: "月份",
          type: "category",
          data: this.tenantCountByMonth.map(item => item.month)
        },
        yAxis: {
          name: "租客总数"
        },
        series: [
          {
            name: "租客数量",
            type: "bar",
            data: this.tenantCountByMonth.map(item => item.count)
          }
        ]
      };
      myChart.setOption(option);
    },
    getCount() {
      this.$axios.post("count", { none: "none" }).then(res => {
        this.counts = res.data.data;
      });
    }
  }
};
</script>
  
  <style scoped>
.title-row {
  margin-top: 5px;
  text-align: center;
}

.card-row {
  margin-top: 5px;
}

.card {
  text-align: center;
  padding: 5px;
}

.card-content {
  font-size: 18px;
}

.number {
  font-size: 24px;
  margin-top: 5px;
}

.unit {
  font-size: 16px;
  color: #999;
}

.hint-row {
  margin-top: 5px;
  text-align: center;
  color: #666;
}

.additional-info {
  margin-top: 5px;
}

.announcement,
.quick-actions,
.chart,
.user-card {
  text-align: center;
  padding: 5px;
}

.charts {
  margin-top: 5px;
}

.chart-container {
  width: 100%;
  height: 305px;
}

.user-info {
  margin-top: 5x;
}
</style>
  